<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--部门数据-->
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <el-input
            v-model="deptName"
            placeholder="请输入部门名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            :data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            node-key="id"
            default-expand-all
            highlight-current
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <!--用户数据-->
      <el-col :span="20" :xs="24">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
        >
          <el-form-item label="用户昵称" prop="nickName">
            <el-input
              v-model="queryParams.nickName"
              placeholder="请输入用户名称"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="手机号码" prop="phonenumber">
            <el-input
              v-model="queryParams.phonenumber"
              placeholder="请输入手机号码"
              clearable
              style="width: 240px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="用户类型" prop="userType">
            <el-select
              v-model="queryParams.userType"
              placeholder="用户类型"
              clearable
              style="width: 240px"
            >
              <el-option
                v-for="i in userTypeList"
                :key="i.value"
                :label="i.label"
                :value="i.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select
              v-model="queryParams.status"
              placeholder="用户状态"
              clearable
              style="width: 240px"
            >
              <el-option
                v-for="dict in statusOptions"
                :key="dict.id"
                :label="dict.fullName"
                :value="dict.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="dateRange"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="地区选择">
            <el-cascader
              v-model="queryParams.regionId"
              :options="dataArea"
              :props="areaProps"
              filterable
              checkStrictly
              :show-all-levels="false"
              style="width: 240px"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPermi="['system:user:add']"
              >新增</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="el-icon-edit"
              size="mini"
              :disabled="single"
              @click="handleUpdate"
              v-hasPermi="['system:user:edit']"
              >修改</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiple"
              @click="handleDelete"
              v-hasPermi="['system:user:remove']"
              >删除</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="info"
              plain
              icon="el-icon-upload2"
              size="mini"
              @click="handleImport"
              v-hasPermi="['system:user:import']"
              >导入</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              v-hasPermi="['system:user:export']"
              >导出</el-button
            >
          </el-col>
          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="getList"
            :columns="columns"
          ></right-toolbar>
        </el-row>

        <el-table
          v-loading="loading"
          :data="userList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column
            label="用户编号"
            align="center"
            key="userId"
            prop="userId"
            v-if="columns[0].visible"
          />
          <el-table-column
            label="用户名称"
            align="center"
            key="userName"
            prop="userName"
            v-if="columns[1].visible"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="用户昵称"
            align="center"
            key="nickName"
            prop="nickName"
            v-if="columns[2].visible"
            :show-overflow-tooltip="true"
          />
          <!-- <el-table-column
            label="部门"
            align="center"
            key="deptName"
            prop="dept.deptName"
            v-if="columns[3].visible"
            :show-overflow-tooltip="true"
          /> -->
          <el-table-column
            label="用户类型"
            align="center"
            key="userType"
            prop="userType"
            v-if="columns[7].visible"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.userType | enumUserType }}
            </template>
          </el-table-column>
          <el-table-column
            label="手机号码"
            align="center"
            key="phonenumber"
            prop="phonenumber"
            v-if="columns[4].visible"
            width="120"
          />
          <el-table-column
            label="当前状态"
            align="center"
            key="status"
            v-if="columns[5].visible"
          >
            <template slot-scope="scope">
              {{ scope.row.status | dynamicText(statusOptions) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="设置状态"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.status"
                placeholder="选择状态"
                @change="handleStatusChange(scope.row)"
                v-if="['0', '1', '5'].includes(scope.row.status)"
              >
                <el-option label="启用" value="0" />
                <el-option label="锁定" value="5" />
                <el-option label="停用" value="1" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            align="center"
            prop="createTime"
            v-if="columns[6].visible"
            width="160"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="操作"
            align="center"
            width="160"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope" v-if="scope.row.userId !== 1">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['system:user:edit']"
                >修改</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['system:user:remove']"
                >删除</el-button
              >
              <el-dropdown
                size="mini"
                @command="(command) => handleCommand(command, scope.row)"
                v-hasPermi="['system:user:resetPwd', 'system:user:edit']"
              >
                <el-button size="mini" type="text" icon="el-icon-d-arrow-right"
                  >更多</el-button
                >
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    command="handleResetPwd"
                    icon="el-icon-key"
                    v-hasPermi="['system:user:resetPwd']"
                  >
                    重置密码</el-dropdown-item
                  >
                  <el-dropdown-item
                    command="handleAuthRole"
                    icon="el-icon-circle-check"
                    v-hasPermi="['system:user:edit']"
                    >分配角色</el-dropdown-item
                  >
                  <el-dropdown-item
                    command="handClickEntry"
                    icon="el-icon-warning-outline"
                    v-hasPermi="['system:user:enter']"
                    >一键进入</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>

    <!-- 添加或修改用户配置对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="800px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-tabs
        v-model="cutUserType"
        type="card"
        @tab-click="cutUserList"
        :class="title === '修改用户' ? 'pointerAcc' : ''"
      >
        <el-tab-pane
          v-for="i in userTypeList"
          :key="i.value"
          :label="i.label"
          :name="i.value"
          style="pointer-events: auto"
        />
      </el-tabs>
      <el-form ref="formName" :model="form" :rules="rules" label-width="180px">
        <el-row>
          <el-col
            :span="12"
            v-if="['02', '03', '04', '05'].includes(cutUserType)"
          >
            <el-form-item label="消防技术服务机构" prop="serviceOrgId">
              <el-select
                v-model="form.serviceOrgId"
                placeholder="请选择技术服务机构"
                :disabled="inputDis"
              >
                <el-option
                  v-for="item in serviceOrgOptions"
                  :key="item.userId"
                  :label="item.nickName"
                  :value="item.userId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- v-if="cutUserType !== '01'" -->
          <el-col :span="12">
            <el-form-item label="用户昵称" prop="nickName">
              <el-input
                v-model="form.nickName"
                placeholder="请输入用户昵称"
                maxlength="30"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="cutUserType == '01'">
            <el-form-item label="法人姓名" prop="legalPersonName">
              <el-input
                v-model="form.legalPersonName"
                placeholder="请输入法人姓名"
                autocomplete="new-password"
                maxlength="30"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="cutUserType == '01'">
            <el-form-item label="技术负责人姓名" prop="technicalDirectorName">
              <el-input
                v-model="form.technicalDirectorName"
                placeholder="请输入技术负责人姓名"
                autocomplete="new-password"
                aria-autocomplete="none"
                maxlength="30"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户性别">
              <el-select v-model="form.sex" placeholder="请选择性别" prop="sex">
                <el-option
                  v-for="dict in dict.type.sys_user_sex"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="!form.userId">
            <el-form-item label="用户密码" prop="password">
              <el-input
                v-model="form.password"
                placeholder="请输入密码"
                type="password"
                maxlength="20"
                show-password
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="cutUserType == '01'">
            <el-form-item
              label="技术负责人手机号"
              prop="technicalDirectorPhone"
            >
              <el-input
                v-model="form.technicalDirectorPhone"
                placeholder="请输入技术负责人手机号"
                maxlength="30"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12" v-if="cutUserType == '01'">
            <el-form-item label="企业统一社会信用代码" prop="creditCode">
              <el-input
                v-model="form.creditCode"
                placeholder="请输入企业统一社会信用代码"
                maxlength="30"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="cutUserType == '01'">
            <el-form-item
              label="工商营业执照登记地址"
              prop="businessLicenseAddress"
            >
              <el-input
                v-model="form.businessLicenseAddress"
                placeholder="请输入工商营业执照登记地址"
                maxlength="30"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="手机号码" prop="phonenumber">
              <el-input
                v-model="form.phonenumber"
                placeholder="请输入手机号码"
                maxlength="11"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="身份证号码" prop="idCard">
              <el-input
                v-model="form.idCard"
                placeholder="请输入身份证号码"
                maxlength="18"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12" v-if="['03', '05'].includes(cutUserType)">
            <el-form-item label="资格证书名称" prop="qualificationName">
              <el-input
                v-model="form.qualificationName"
                placeholder="请输入资格证书名称"
                maxlength="50"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="['03', '05'].includes(cutUserType)">
            <el-form-item label="资格证书号" prop="qualificationCode">
              <el-input
                v-model="form.qualificationCode"
                placeholder="请输入资格证书号"
                maxlength="30"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="cutUserType == '03'">
            <el-form-item
              label="资格证件有效期"
              prop="certificateValidityPeriod"
            >
              <el-radio-group v-model="form.certificateValidityPeriod">
                <el-radio :label="1">长期</el-radio>
                <el-radio :label="2">临时</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="cutUserType == '03'">
            <el-form-item label="证书开始日期" prop="qualificationStartDate">
              <el-date-picker
                clearable
                v-model="form.qualificationStartDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择证书开始日期"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="cutUserType == '03'">
            <el-form-item label="证书结束日期" prop="qualificationEndDate">
              <el-date-picker
                clearable
                v-model="form.qualificationEndDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择证书开始日期"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>

          <el-col :span="12" v-if="cutUserType == '01'">
            <el-form-item label="邮政编码" prop="postcode">
              <el-input
                v-model="form.postcode"
                placeholder="请输入邮政编码"
                maxlength="6"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="cutUserType == '01'">
            <el-form-item label="开户银行" prop="bankName">
              <el-input
                v-model="form.bankName"
                placeholder="请输入开户银行"
                maxlength="200"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="cutUserType == '01'">
            <el-form-item label="银行账号" prop="bankNumber">
              <el-input
                v-model="form.bankNumber"
                placeholder="请输入银行账号"
                maxlength="20"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="cutUserType == '01'">
            <el-form-item label="地区选择" prop="regionId">
              <el-cascader
                v-model="form.regionId"
                :options="dataArea"
                :props="areaProps"
                filterable
                checkStrictly
                :show-all-levels="false"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input
                v-model="form.email"
                placeholder="请输入邮箱"
                maxlength="30"
              />
            </el-form-item>
          </el-col>

          <!-- <el-col :span="12">
            <el-form-item label="状态">
              <el-radio-group v-model="form.status">
                <el-radio
                  v-for="dict in dict.type.sys_normal_disable"
                  :key="dict.value"
                  :label="dict.value"
                  >{{ dict.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col> -->

          <!-- <el-col :span="12">
            <el-form-item label="角色" prop="roleIds">
              <el-select v-model="form.roleIds" multiple placeholder="请选择角色">
                <el-option v-for="item in roleOptions" :key="item.roleId" :label="item.roleName" :value="item.roleId"
                  :disabled="item.status == 1" />
              </el-select>
            </el-form-item>
          </el-col> -->

          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="form.remark"
                type="textarea"
                placeholder="请输入内容"
                maxlength="255"
              />
            </el-form-item>
          </el-col>

          <!-- 上传图片 -->
          <el-col :span="24" v-if="cutUserType == '01'">
            <el-form-item
              label="技术负责人身份证"
              prop="technicalDirectorIdCard"
              class="is-required"
            >
              <ImageUpload
                v-model="form.technicalDirectorIdCard"
                :limit="2"
                :isShowTip="false"
                :isState="false"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="cutUserType == '01'">
            <el-form-item
              label="工商营业执照副本"
              prop="businessLicenseCopy"
              class="is-required"
            >
              <ImageUpload
                v-model="form.businessLicenseCopy"
                :limit="1"
                :isShowTip="false"
                :isState="false"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="['01', '03', '05'].includes(cutUserType)">
            <el-form-item
              label="资质证书"
              prop="qualification"
              class="is-required"
            >
              <ImageUpload
                v-model="form.qualification"
                :limit="1"
                :isShowTip="false"
                :isState="false"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="['03', '04', '05'].includes(cutUserType)">
            <el-form-item
              label="身份证照片"
              prop="idCardPhoto"
              class="is-required"
            >
              <ImageUpload
                v-model="form.idCardPhoto"
                :limit="2"
                :isShowTip="false"
                :isState="false"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="cutUserType == '01'">
            <el-form-item
              label="技术负责人注册证书"
              prop="technicalDirectorCertificate"
              class="is-required"
            >
              <ImageUpload
                v-model="form.technicalDirectorCertificate"
                :limit="1"
                :isShowTip="false"
                :isState="false"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="['03', '04', '05'].includes(cutUserType)">
            <el-form-item label="人脸采集" prop="faceUrl" class="is-required">
              <ImageUpload
                v-model="form.faceUrl"
                :limit="1"
                :isShowTip="false"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="cutUserType != '01'">
            <el-form-item label="归属部门" prop="deptId">
              <treeselect
                v-model="form.deptId"
                :options="deptOptions"
                :show-count="true"
                placeholder="请选择归属部门"
              />
            </el-form-item>
          </el-col>

          <!-- <el-col :span="12">
            <el-form-item label="岗位">
              <el-select
                v-model="form.postIds"
                multiple
                placeholder="请选择岗位"
              >
                <el-option
                  v-for="item in postOptions"
                  :key="item.postId"
                  :label="item.postName"
                  :value="item.postId"
                  :disabled="item.status == 1"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 用户导入对话框 -->
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="400px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="upload.updateSupport" />
            是否更新已经存在的用户数据
          </div>
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link
            type="primary"
            :underline="false"
            style="font-size: 12px; vertical-align: baseline"
            @click="importTemplate"
            >下载模板</el-link
          >
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listUser,
  getUser,
  delUser,
  addUser,
  updateUser,
  resetUserPwd,
  changeUserStatus,
  deptTreeSelect,
  getServiceSelect,
  loginMaintenance,
  regionTree,
} from "@/api/system/user";
import { getToken, setToken } from "@/utils/auth";
import { getInfo } from "@/api/login.js";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "User",
  dicts: ["sys_normal_disable", "sys_user_sex"],
  components: {
    Treeselect,
  },
  created() {
    this.getServiceSelectList();
    this.getList();
    this.getDeptTree();
    this.getConfigKey("sys.user.initPassword").then((response) => {
      this.initPassword = response.msg;
    });
    this.getTypeList();
    regionTree().then((res) => {
      this.dataArea = this.treeByChildren(res.data);
    });
  },
  data() {
    // 文件上传校验规则
    const fileMustUpload1 = (rule, value, callback) => {
      if (
        this.form.technicalDirectorIdCard == undefined ||
        this.form.technicalDirectorIdCard == null ||
        this.form.technicalDirectorIdCard == ""
      ) {
        callback("请上传技术负责人身份证");
      } else {
        callback();
      }
    };
    const fileMustUpload2 = (rule, value, callback) => {
      if (
        this.form.businessLicenseCopy == undefined ||
        this.form.businessLicenseCopy == null ||
        this.form.businessLicenseCopy == ""
      ) {
        callback("请上传工商营业执照副本");
      } else {
        callback();
      }
    };
    const fileMustUpload3 = (rule, value, callback) => {
      if (
        this.form.qualification == undefined ||
        this.form.qualification == null ||
        this.form.qualification == ""
      ) {
        callback("请上传资质证书");
      } else {
        callback();
      }
    };
    const fileMustUpload4 = (rule, value, callback) => {
      if (
        this.form.idCardPhoto == undefined ||
        this.form.idCardPhoto == null ||
        this.form.idCardPhoto == ""
      ) {
        callback("请上传身份证照片");
      } else {
        callback();
      }
    };
    const fileMustUpload5 = (rule, value, callback) => {
      if (
        this.form.technicalDirectorCertificate == undefined ||
        this.form.technicalDirectorCertificate == null ||
        this.form.technicalDirectorCertificate == ""
      ) {
        callback("请上传技术负责人注册证书");
      } else {
        callback();
      }
    };
    const fileMustUpload6 = (rule, value, callback) => {
      if (
        this.form.faceUrl == undefined ||
        this.form.faceUrl == null ||
        this.form.faceUrl == ""
      ) {
        callback("请上传人脸采集");
      } else {
        callback();
      }
    };
    const checkStartTime = (rule, value, callback) => {
      if (!value) {
        callback("请选择证书开始时间");
      } else if (!this.form.qualificationEndDate) {
        callback();
      } else {
        if (this.form.qualificationEndDate <= value) {
          callback(new Error("证书开始时间不能晚于证书结束时间"));
        } else {
          callback();
        }
      }
    };
    const checkEndTime = (rule, value, callback) => {
      if (!value) {
        callback("请选择证书结束时间");
      } else if (!this.form.qualificationStartDate || !value) {
        callback();
      } else {
        if (this.form.qualificationStartDate >= value) {
          callback(new Error("证书结束时间不能早于证书开始时间"));
        } else {
          callback();
        }
      }
    };

    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户表格数据
      userList: null,
      // 弹出层标题
      title: "",
      // 部门树选项
      deptOptions: null,
      // 是否显示弹出层
      open: false,
      // 部门名称
      deptName: null,
      // 默认密码
      initPassword: null,
      // 日期范围
      dateRange: [],
      inputDis: false,
      // 岗位选项
      postOptions: [],
      // 角色选项
      roleOptions: [],
      // 消防技术服务机构
      serviceOrgOptions: [],
      userIdLists: "",
      dataArea: [],
      areaProps: {
        checkStrictly: true,
        children: "children",
        label: "name",
        value: "id",
      },
      singleSelectTreeVal: "", //单选树默认label值
      singleSelectTreeKey: "", //单选树默认key值
      // 表单参数
      form: {
        technicalDirectorCertificate: "",
        legalPersonName: "",
      },
      defaultProps: {
        children: "children",
        label: "label",
      },
      // 头像上传
      imageUrl1: "",
      imageUrl2: "",
      imageUrl3: "",
      imageUrl4: "",
      imageUrl5: "",
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: {
          Authorization: "Bearer " + getToken(),
        },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/system/user/importData",
      },
      statusOptions: [
        {
          fullName: "启用",
          id: "0",
        },
        {
          fullName: "停用",
          id: "1",
        },
        {
          fullName: "待审核",
          id: "3",
        },
        {
          fullName: "审核拒绝",
          id: "4",
        },
        {
          fullName: "锁定",
          id: "5",
        },
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        nickName: null,
        phonenumber: null,
        status: null,
        deptId: null,
        regionId: null,
        userType: null,
      },
      // 列表切换绑定
      cutUserType: "00",
      cutUserTypeState: "00",
      // 上传参数
      uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload",
      // 列信息
      columns: [
        {
          key: 0,
          label: `用户编号`,
          visible: true,
        },
        {
          key: 1,
          label: `用户名称`,
          visible: true,
        },
        {
          key: 2,
          label: `用户昵称`,
          visible: true,
        },
        {
          key: 3,
          label: `部门`,
          visible: true,
        },
        {
          key: 4,
          label: `手机号码`,
          visible: true,
        },
        {
          key: 5,
          label: `状态`,
          visible: true,
        },
        {
          key: 6,
          label: `创建时间`,
          visible: true,
        },
        {
          key: 7,
          label: `用户类型`,
          visible: true,
        },
      ],
      // 表单校验
      rules: {
        nickName: [
          {
            required: true,
            message: "用户昵称不能为空",
            trigger: "blur",
          },
        ],
        bankName: [
          {
            required: true,
            message: "开户行不能为空",
            trigger: "blur",
          },
        ],
        legalPersonName: [
          {
            required: true,
            message: "法人姓名不能为空",
            trigger: "blur",
          },
        ],
        technicalDirectorName: [
          {
            required: true,
            message: "姓名不能为空",
            trigger: "blur",
          },
        ],
        businessLicenseAddress: [
          {
            required: true,
            message: "地址不能为空",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "用户密码不能为空",
            trigger: "blur",
          },
          {
            min: 5,
            max: 20,
            message: "用户密码长度必须介于 5 和 20 之间",
            trigger: "blur",
          },
        ],
        email: [
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: "blur",
          },
        ],
        roleIds: [
          {
            required: true,
            message: "至少选择一个角色",
            trigger: "change",
          },
        ],
        phonenumber: [
          {
            required: true,
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        technicalDirectorPhone: [
          {
            required: true,
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        creditCode: [
          {
            required: true,
            pattern: /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/,
            message: "请输入正确的企业信用代码",
            trigger: "blur",
          },
        ],
        idCard: [
          {
            required: true,
            pattern: /^\d{17}[\dX]$/,
            message: "请输入正确的身份证号码",
            trigger: "blur",
          },
        ],
        bankNumber: [
          {
            required: true,
            pattern: /\b\d{9,}\b/,
            message: "请输入正确的银行账号",
            trigger: "blur",
          },
        ],
        postcode: [
          {
            required: true,
            pattern: /^[1-9]\d{5}$/,
            message: "请输入正确的邮政编码",
            trigger: "blur",
          },
        ],
        qualificationName: [
          {
            required: true,
            message: "资格证书名称不能为空",
            trigger: "blur",
          },
        ],
        qualificationCode: [
          {
            required: true,
            message: "资格证书号不能为空",
            trigger: "blur",
          },
        ],
        certificateValidityPeriod: [
          {
            required: true,
            message: "证书有效期不能为空",
            trigger: "blur",
          },
        ],
        technicalDirectorIdCard: [
          {
            validator: fileMustUpload1,
            trigger: "change",
          },
        ],
        businessLicenseCopy: [
          {
            validator: fileMustUpload2,
            trigger: "change",
          },
        ],
        qualification: [
          {
            validator: fileMustUpload3,
            trigger: "change",
          },
        ],
        idCardPhoto: [
          {
            validator: fileMustUpload4,
            trigger: "change",
          },
        ],
        technicalDirectorCertificate: [
          {
            validator: fileMustUpload5,
            trigger: "change",
          },
        ],
        faceUrl: [
          {
            validator: fileMustUpload6,
            trigger: "change",
          },
        ],
        qualificationStartDate: [
          {
            required: true,
            validator: checkStartTime,
            trigger: ["change", "blur"],
          },
        ],
        qualificationEndDate: [
          {
            required: true,
            validator: checkEndTime,
            trigger: ["change", "blur"],
          },
        ],
      },
      userTypeList: [],
      userTypeState: false,
    };
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    },
  },

  methods: {
    // 筛选节点
    treeByChildren(arr) {
      arr.forEach((item) => {
        if (item.children && item.children.length === 0) {
          delete item.children;
        } else if (item.children) {
          this.treeByChildren(item.children);
        }
      });
      return arr;
    },
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      let params = Object.assign(this.queryParams);
      if (params.regionId && params.regionId.length > 0)
        params.regionId = params.regionId[params.regionId.length - 1];
      listUser(this.addDateRange({ ...params }, this.dateRange)).then(
        (response) => {
          this.userList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      );
    },
    getTypeList() {
      getInfo().then((res) => {
        this.userTypeList = [];
        this.inputDis = false;
        if (res.user.userType == "00") {
          this.cutUserType = "00";
          this.form.roleIds = [102];
          this.userTypeList.push({
            value: "00",
            label: "平台管理员",
            id: 102,
          });
          this.userTypeList.push({
            value: "01",
            label: "消防技术服务机构",
            id: 2,
          });
          this.userTypeList.push({
            value: "02",
            label: "委托单位",
            id: 3,
          });
          this.userTypeList.push({
            value: "03",
            label: "一级消防注册工程师",
            id: 4,
          });
          this.userTypeList.push({
            value: "04",
            label: "中级消防设施操作员",
            id: 5,
          });
          this.userTypeList.push({
            value: "05",
            label: "平台维修员",
            id: 6,
          });
        }
        if (res.user.userType == "01") {
          this.cutUserType = "02";
          this.form.roleIds = [3];
          this.form.serviceOrgId = res.user.serviceOrgId;
          this.userIdLists = res.user.serviceOrgId;
          this.inputDis = true;
          this.userTypeList.push({
            value: "02",
            label: "委托单位",
            id: 3,
          });
          this.userTypeList.push({
            value: "03",
            label: "一级消防注册工程师",
            id: 4,
          });
          this.userTypeList.push({
            value: "04",
            label: "中级消防设施操作员",
            id: 5,
          });
          this.userTypeList.push({
            value: "05",
            label: "平台维修员",
            id: 6,
          });
        }
        if (res.user.userType == "03") {
          this.cutUserType = "03";
          this.form.roleIds = [4];
          this.inputDis = true;
          this.userTypeList.push({
            value: "03",
            label: "一级消防注册工程师",
            id: 4,
          });
        }
        if (res.user.userType == "04") {
          this.cutUserType = "04";
          this.form.roleIds = [5];
          this.userTypeList.push({
            value: "04",
            label: "中级消防设施操作员",
            id: 5,
          });
        }
        if (res.user.userType == "05") {
          this.cutUserType = "05";
          this.form.roleIds = [6];
          this.userTypeList.push({
            value: "05",
            label: "平台维修员",
            id: 6,
          });
        }
      });
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
      });
    },
    // 查询服务机构
    async getServiceSelectList() {
      const res = await getServiceSelect("01");
      this.serviceOrgOptions = res.data;
      if (this.userIdLists) {
        this.form.serviceOrgId = this.userIdLists;
      } else {
        this.form.serviceOrgId = "";
      }
    },
    // 一键进入
    oneClickEntry(row) {
      loginMaintenance(row.userId).then((res) => {
        setToken(res.data);
        this.$store.commit("SET_TOKEN", res.data);
        this.$router.push({
          path: this.redirect || "/",
        });
        window.location.reload();
      });
    },
    // 切换列表
    cutUserList(tab) {
      this.reset();
      if (this.title == "修改用户") {
        this.cutUserType = this.cutUserTypeState;
      } else {
        this.cutUserType = tab.name;
        this.serviceOrgOptions = this.serviceOrgOptions.filter(
          (i) => i.userId != -1
        );
        if (tab.name == "05") {
          this.serviceOrgOptions.unshift({
            userId: -1,
            nickName: "总平台",
          });
        }
        this.form.roleIds = [
          this.userTypeList.find((i) => i.value == tab.name).id,
        ];
        this.$refs["formName"].clearValidate();
        this.form.serviceOrgId = this.userIdLists;
      }
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) != -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.deptId = data.id;
      this.handleQuery();
    },
    // 用户状态修改
    handleStatusChange(row) {
      let text =
        row.status == "1"
          ? "停用"
          : row.status == "0"
          ? "启用"
          : row.status == "5"
          ? "锁定"
          : ""; // 你可以添加一个默认值来处理其他情况
      this.$modal
        .confirm('确认要"' + text + '""' + row.userName + '"用户吗？')
        .then(function () {
          return changeUserStatus(row.userId, row.status);
        })
        .then(() => {
          this.$modal.msgSuccess(text + "成功");
        })
        .catch(function () {
          row.status = row.status === "0" ? "1" : "0";
        });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.cutUserType = "00";
      this.reset();
      this.userTypeState = false;
    },
    // 表单重置
    reset() {
      this.form = {
        userId: null,
        deptId: null,
        serviceOrgId: null,
        userName: null,
        nickName: null,
        password: null,
        phonenumber: null,
        email: null,
        sex: null,
        status: "0",
        remark: null,
        technicalDirectorName: null,
        legalPersonName: null,
        postIds: [],
        roleIds: [],
        certificateValidityPeriod: 1,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.queryParams.deptId = null;
      this.queryParams.regionId = null;
      this.singleSelectTreeKey = "";
      this.singleSelectTreeVal = "";
      this.$refs.tree.setCurrentKey(null);
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.userId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case "handleResetPwd":
          this.handleResetPwd(row);
          break;
        case "handleAuthRole":
          this.handleAuthRole(row);
          break;
        case "handClickEntry":
          this.oneClickEntry(row);
          break;
        default:
          break;
      }
    },
    clearData() {
      this.form.nickName = "";
      this.form.legalPersonName = "";
      this.form.technicalDirectorName = "";
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.getDeptTree();
      this.getServiceSelectList();
      this.getTypeList();
      // this.clearData()
      getUser().then((response) => {
        this.postOptions = response.posts;
        this.roleOptions = response.roles;
        console.log(response.roles, ">>>>");
        this.open = true;
        this.userTypeState = false;
        this.title = "添加用户";
        this.form.password = this.initPassword;
        this.$nextTick(() => {
          this.$refs["formName"].clearValidate();
        });
      });
    },
    /** 修改按钮操作 */
    async handleUpdate(row) {
      this.reset();
      this.getTypeList();
      this.getDeptTree();
      await this.getServiceSelectList();
      const userId = row.userId || this.ids;
      this.serviceOrgOptions = this.serviceOrgOptions.filter(
        (i) => i.userId != -1
      );
      if (row.userType == "05") {
        this.serviceOrgOptions.unshift({
          userId: -1,
          nickName: "总平台",
        });
      }
      if (row.deptId && !this.isIdExist(row.deptId, this.deptOptions)) {
        this.deptOptions.push({
          id: row.deptId,
          label: row.dept.deptName,
        });
      }
      getUser(userId).then((response) => {
        if (response.data.serviceOrg) {
          this.form = {
            ...response.data.serviceOrg,
            ...response.data,
          };
          this.form.serviceOrgId = response.data.serviceOrg.id;
        } else {
          this.form = response.data;
        }
        this.postOptions = response.posts;
        this.roleOptions = response.roles;
        this.$set(this.form, "postIds", response.postIds);
        this.$set(this.form, "roleIds", response.roleIds);
        this.open = true;
        this.title = "修改用户";
        this.form.password = "";
        this.userTypeState = true;
        this.cutUserType = response.data.userType;
        this.cutUserTypeState = response.data.userType;
        this.$refs["formName"].clearValidate();
      });
    },
    /** 重置密码按钮操作 */
    handleResetPwd(row) {
      this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
        // showPassword: false,
        // inputType: 'password',
        rows: 1,
        controls: false,
        // inputPattern: /^.{5,20}$/,
        inputPattern: /^[a-zA-Z0-9]{6,}$/,
        // inputErrorMessage: "用户密码长度必须介于 5 和 20 之间",
        inputErrorMessage: "用户密码长度不能小于6位且只能包含字母和数字",
      })
        .then(({ value }) => {
          resetUserPwd(row.userId, value).then((response) => {
            this.$modal.msgSuccess("修改成功，新密码是：" + value);
          });
        })
        .catch(() => {});
    },
    /** 分配角色操作 */
    handleAuthRole: function (row) {
      const userId = row.userId;
      this.$router.push("/system/user-auth/role/" + userId);
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["formName"].validate((valid) => {
        if (valid) {
          let data = Object.assign({}, this.form);
          data.userName = data.phonenumber;
          data.userType = this.cutUserType;
          if (data.regionId && data.regionId.length > 0) {
            data.regionId = data.regionId[data.regionId.length - 1];
          }
          if (data.userId != null) {
            updateUser(data).then((res) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addUser(data).then((res) => {
              this.$modal.msgSuccess(res.msg);
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const userIds = row.userId || this.ids;
      this.$modal
        .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
        .then(() => {
          delUser(userIds).then(() => {
            this.getList();
            this.$modal.msgSuccess("删除成功");
          });
        })
        .catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "system/user/export",
        {
          ...this.queryParams,
        },
        `user_${new Date().getTime()}.xlsx`
      );
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "用户导入";
      this.upload.open = true;
    },
    /** 下载模板操作 */
    importTemplate() {
      this.download(
        "system/user/importTemplate",
        {},
        `user_template_${new Date().getTime()}.xlsx`
      );
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
          response.msg +
          "</div>",
        "导入结果",
        {
          dangerouslyUseHTMLString: true,
        }
      );
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    // 递归判断是否存在数组中
    isIdExist(id, data) {
      for (let i = 0; i < data.length; i++) {
        const item = data[i];
        if (item.id === id) {
          return true;
        }
        if (item.children && Array.isArray(item.children)) {
          if (this.isIdExist(id, item.children)) {
            return true;
          }
        }
      }
      return false;
    },
  },
};
</script>

<style lang="scss" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.pointerAcc {
  pointer-events: none;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
